<template>
    <div class="upload-container">
        <div class="upload-wrapper">
            <ElUpload ref="uploadRef" :action="uploadUrl" :headers="headers" :on-success="onSuccess"
                :on-remove="onRemove" multiple list-type="text">
                <template #trigger>
                    <el-button type="primary">上传文件</el-button>
                </template>
            </ElUpload>
        </div>
        <div class="file-drop-area" @paste="handlePaste" @dragover.prevent>
            <div class="drop-content">
                <p class="drop-text">点击粘贴文件或截图</p>
            </div>
            <input type="file" ref="fileInput" style="display: none" multiple>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElButton, ElUpload, UploadInstance } from 'element-plus'
import { getFileExtension } from '@/utils/zeo'

const uploadUrl = import.meta.env.VITE_APP_API_BASE_URL + '/new/ykf/fileNew/uploadFile?mklx=gjjl&glId=0';
const headers = { token: localStorage.getItem('token') }

interface Props {
    modelValue: string;
    data: any;
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    data: () => ({})
})

interface Emits {
    'update:model-value': [string]
}
const emit = defineEmits<Readonly<Emits>>()

const data = computed(() => {
    return props.data
})

const onRemove = () => {
    emit('update:model-value', '')
    data.value.fileUrl = ''
}

let fileId = '';

const onSuccess = (response) => {
    console.log(response);
    fileId = fileId + ',' + response.data.ykfFileId;
    if (!fileId) return
    emit('update:model-value', fileId)
}

const uploadRef = ref<UploadInstance>()

const handlePaste = async (event) => {
    const items = event.clipboardData?.items || []

    for (const item of items) {
        console.log(item);
        const blob = item.getAsFile()
        if (!blob) continue

        const extension = getFileExtension(item.type)
        const fileName = `files-${Date.now()}.${extension}`
        const file = new File([blob], fileName, { type: item.type })

        uploadRef.value?.handleStart(file)  // 添加到上传列表
        uploadRef.value!.submit();
    }
}
</script>

<style scoped lang="scss">
.upload-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.upload-wrapper {
    flex-shrink: 0;
    /* 防止上传组件被压缩 */
}

.file-drop-area {
    border: 2px dashed var(--el-border-color);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--el-fill-color-light);
    flex-grow: 1;
    /* 占据剩余空间 */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    /* 防止内容溢出 */

    &:hover {
        border-color: var(--el-color-primary);
        background-color: var(--el-fill-color-blank);
    }

    .drop-content {
        .upload-icon {
            font-size: 24px;
            color: var(--el-color-primary);
            margin-bottom: 6px;
        }

        .drop-text {
            font-size: 14px;
            font-weight: 500;
            margin: 0;
            color: var(--el-text-color-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

/* 文件列表样式调整，防止影响布局 */
:deep(.el-upload-list) {
    position: absolute;
    width: 100%;
    margin-top: 10px;
    z-index: 10;
}
</style>